<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="4" :sm="6">
            <a-form-item :label="$t('base.name')">
              <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
              <j-input :placeholder="$t('base.inputVagueQuery')" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search"> {{$t('base.query')}} </a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px"> {{$t('base.reset')}} </a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus"> {{$t('base.add')}} </a-button>

      <!--
      <a-button @click="createTask" type="primary" icon="plus">启用任务</a-button>
      <a-button @click="stopTask" type="primary" icon="plus">停用任务</a-button>
      -->
      <a-button @click="batchDel" type="primary" icon="delete"> {{$t('base.del')}} </a-button>

      <a-button type="primary" @click="volSet" icon="sound"> {{$t('radio.volume')}} </a-button>

      <a-button @click="executeTask" type="primary" icon="plus"> {{$t('radio.execution')}} </a-button>
      <a-button @click="shutoffTask" type="primary" icon="plus"> {{$t('radio.stop')}} </a-button>


    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> {{$t('base.selected')}} <a style="font-weight: 600">{{ selectedRowKeys.length }}</a> {{$t('base.item')}}
        <a style="margin-left: 24px" @click="onClearSelected"> {{$t('base.clear')}} </a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{fixed:true,selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">


        <template slot="avatarslot1" slot-scope="text, record, index">
          <a-switch :checkedChildren=" $t('radio.startUsing') " :unCheckedChildren=" $t('radio.discontinueUse') " @click="handleEdit1(record)" v-model="record.statuSwitch0" />
        </template>

        <template slot="avatarslot2" slot-scope="text, record, index">
          <!--<a-switch checkedChildren="执行" unCheckedChildren="停止" @click="handleEdit2(record)" v-model="record.statuSwitch1" />-->
          <div v-show="record.statuSwitch1"> {{$t('radio.executed')}} </div>
          <div v-show="!record.statuSwitch1"> {{$t('radio.cancelled')}} </div>
        </template>


        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)"><a-icon type="form"/> {{$t('base.edit')}} </a>
          <a-divider type="vertical"/>
          <a @click="radioShow(record)"><a-icon type="schedule"/> {{$t('radio.terminalMember')}} </a>
          <a-divider type="vertical"/>
          <a @click="resourceShow(record)"><a-icon type="idcard"/> {{$t('radio.mediaMember')}} </a>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link"><a-icon type="setting" /> {{$t('base.more')}} <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm :title="$t('base.confirmDelete')" @confirm="() => handleDelete(record.id)">
                  <a> <a-icon type="delete" /> {{$t('base.del')}} </a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>

    <glrRadioTask-modal ref="modalForm" @ok="modalFormOk"></glrRadioTask-modal>
    <glr-radio-task-member-radio-list ref="glrRadioTaskMemberRadioList"></glr-radio-task-member-radio-list>
    <glr-radio-task-member-resource-list ref="glrRadioTaskResourceList"></glr-radio-task-member-resource-list>

    <a-modal
      :title="volSetTitle"
      :visible="volSetVisible"
      :confirmLoading="volSetConfirmLoading"
      @ok="volSetHandleOk"
      @cancel="volSetHandleCancel">
      <div style="width: 100%">
        {{$t('radio.volume')}}:<a-slider id="vol_Id" :step="1" :defaultValue="0" v-model="volValue"/>
      </div>
    </a-modal>

  </a-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import GlrRadioTaskModal from './modules/GlrRadioTaskModal'
  import GlrRadioTaskMemberRadioList from "./GlrRadioTaskMemberRadioList"
  import GlrRadioTaskMemberResourceList from "./GlrRadioTaskMemberResourceList"
  import JInput from '@/components/jeecg/JInput'
  import { httpAction } from '@/api/manage'
  export default {
    name: "GlrRadioTaskList",
    mixins:[JeecgListMixin],
    components: {
      GlrRadioTaskMemberResourceList,
      GlrRadioTaskMemberRadioList,
      GlrRadioTaskModal,
      JInput
    },
    data () {
      return {
        volValue:0,
        volSetVisible: false,
        volSetTitle:this.$t('radio.radioVolumeSetting'),
        volSetConfirmLoading:false,
        description: '音柱定时任务管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: this.$t('radio.taskEnableDisable') ,
            align:"center",
            scopedSlots: {customRender: "avatarslot1"}
          },
          {
            title: this.$t('radio.immediateExecutionStatus') ,
            align:"center",
            scopedSlots: {customRender: "avatarslot2"}
          },
          {
            title: this.$t('radio.taskName') ,
            align:"center",
            dataIndex: 'name'
          },
          {
            title: this.$t('base.startTime') ,
            align:"center",
            dataIndex: 'startTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title: this.$t('base.endTime') ,
            align:"center",
            dataIndex: 'endTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title: this.$t('radio.playTime') ,
            align:"center",
            dataIndex: 'division'
          },
          {
            title: this.$t('radio.volume') ,
            align:"center",
            dataIndex: 'playVol'
          },
          /**
          {
            title:'启用状态',
            align:"center",
            dataIndex: 'status_dictText'
          },
          {
            title:'运行状态',
            align:"center",
            dataIndex: 'startStatus_dictText'
          },
           */
          {
            title: this.$t('radio.playDuration') ,
            align:"center",
            dataIndex: 'playTime'
          },
          {
            title: this.$t('radio.belongingRadio') ,
            align:"center",
            dataIndex: 'companyCode_dictText'
          },
          {
            title:  this.$t('base.operation') ,
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/glr/glrRadioTask/list",
          delete: "/glr/glrRadioTask/delete",
          deleteBatch: "/glr/glrRadioTask/deleteBatch",
          exportXlsUrl: "/glr/glrRadioTask/exportXls",
          importExcelUrl: "glr/glrRadioTask/importExcel",
          createTask: "glr/glrRadioTask/createTask",
          executeTask:"glr/glrRadioTask/executeTask",
          setRadioVol: "glr/glrRadioTask/setRadioVol",
        },
        dictOptions:{
        },
      }
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    methods: {
      initDictConfig(){
      },
      //编辑音柱
      radioShow(record) {
        this.$refs.glrRadioTaskMemberRadioList.edit(record,"1",record.companyCode);
      },
      handleEdit1(record) {
        var that = this;
        var stTitle= that.$t('radio.confirmEnableTask') ;
        var stContent= that.$t('radio.enableScheduledTasks');
        var stStatus="0";
        if (!record.statuSwitch0){
          stTitle= that.$t('radio.confirmDisableTask') ;
          stContent= that.$t('radio.disableScheduledTasks') ;
          stStatus="1";
        }
        var ids=record.id;
        that.$confirm({
          title: stTitle,
          content: stContent,
          onOk: function () {
            that.loading = true;
            httpAction(that.url.createTask, {ids: ids,status:stStatus},"post").then((res) => {
              if (res.success) {
                //that.$message.success(res.message);
                that.$message.success(that.$t('base.operationSuccessful'));
                that.loadData();
                that.onClearSelected();
              } else {
                record.statuSwitch0=!record.statuSwitch0
                //that.$message.warning(res.message);
                that.$message.warning(that.$t('base.operationFailed'));
              }
            }).finally(() => {
              that.loading = false;
            });
          },
          onCancel:function () {
            record.statuSwitch0=!record.statuSwitch0
          }
        });
      },
      handleEdit2(record) {
        var that = this;
        if (!record.statuSwitch0){
          that.$message.warning( that.$t('radio.taskHasNotBeenEnabled') );

          record.statuSwitch1=!record.statuSwitch1
          return
        }

        var stTitle= that.$t('radio.confirmImmediateExecution') ;
        var stContent= that.$t('radio.performTaskImmediately') ;
        var stStatus="3";
        if (!record.statuSwitch1){
          stTitle= that.$t('radio.confirmStopImmediately') ;
          stContent= that.$t('radio.stopTaskImmediately') ;
          stStatus="4";
        }
        var ids=record.id;
        that.$confirm({
          title: stTitle,
          content: stContent,
          onOk: function () {
            that.loading = true;
            httpAction(that.url.executeTask, {ids: ids,status:stStatus},"post").then((res) => {
              if (res.success) {
                //that.$message.success(res.message);
                that.$message.success(that.$t('base.operationSuccessful'));
                that.loadData();
                that.onClearSelected();
              } else {
                record.statuSwitch1=!record.statuSwitch1
                //that.$message.warning(res.message);
                that.$message.warning(that.$t('base.operationFailed'));
              }
            }).finally(() => {
              that.loading = false;
            });
          },
          onCancel:function () {
            record.statuSwitch1=!record.statuSwitch1
          }
        });
      },
      //编辑资源
      resourceShow(record) {
        this.$refs.glrRadioTaskResourceList.edit(record,"2",record.companyCode);
      },
      createTask(){
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          var ids = "";
          for (var a = 0; a < this.selectedRowKeys.length; a++) {
            ids += this.selectedRowKeys[a] + ",";
          }
          var that = this;
          this.$confirm({
            title:  that.$t('radio.confirmEnableTask') ,
            content: that.$t('radio.enableScheduledTasks') ,
            onOk: function () {
              that.loading = true;
              httpAction(that.url.createTask, {ids: ids,status:0},"post").then((res) => {
                if (res.success) {
                  //that.$message.success(res.message);
                  that.$message.success(that.$t('base.operationSuccessful'));
                  that.loadData();
                  that.onClearSelected();
                } else {
                  //that.$message.warning(res.message);
                  that.$message.warning(that.$t('base.operationFailed'));
                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      },
      stopTask(){
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          var ids = "";
          for (var a = 0; a < this.selectedRowKeys.length; a++) {
            ids += this.selectedRowKeys[a] + ",";
          }
          var that = this;
          this.$confirm({
            title:  that.$t('radio.confirmDisableTask') ,
            content:  that.$t('radio.disableScheduledTasks') ,
            onOk: function () {
              that.loading = true;
              httpAction(that.url.createTask, {ids: ids,status:1},"post").then((res) => {
                if (res.success) {
                  //that.$message.success(res.message);
                  that.$message.success(that.$t('base.operationSuccessful'));
                  that.loadData();
                  that.onClearSelected();
                } else {
                  //that.$message.warning(res.message);
                  that.$message.warning(that.$t('base.operationFailed'));

                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      },
      executeTask(){
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          var ids = "";
          for (var a = 0; a < this.selectedRowKeys.length; a++) {
            ids += this.selectedRowKeys[a] + ",";
          }
          var that = this;
          this.$confirm({
            title:  that.$t('radio.confirmImmediateExecution') ,
            content:  that.$t('radio.performTaskImmediately') ,
            onOk: function () {
              that.loading = true;
              httpAction(that.url.executeTask, {ids: ids,status:3},"post").then((res) => {
                if (res.success) {
                  //that.$message.success(res.message);
                  that.$message.success(that.$t('base.operationSuccessful'));
                  that.loadData();
                  that.onClearSelected();
                } else {
                  //that.$message.warning(res.message);
                  that.$message.warning(that.$t('base.operationFailed'));
                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      },
      shutoffTask(){
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          var ids = "";
          for (var a = 0; a < this.selectedRowKeys.length; a++) {
            ids += this.selectedRowKeys[a] + ",";
          }
          var that = this;
          this.$confirm({
            title:  that.$t('radio.confirmStopImmediately') ,
            content: that.$t('radio.stopTaskImmediately') ,
            onOk: function () {
              that.loading = true;
              httpAction(that.url.executeTask, {ids: ids,status:4},"post").then((res) => {
                if (res.success) {
                  //that.$message.success(res.message);
                  that.$message.success(that.$t('base.operationSuccessful'));
                  that.loadData();
                  that.onClearSelected();
                } else {
                  //that.$message.warning(res.message);
                  that.$message.warning(that.$t('base.operationFailed'));
                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      },

      volSet: function(){
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        }else{
          this.volValue=0;
          this.volSetVisible=true;
        }
      },
      volSetHandleCancel:function(){
        this.volSetClose()
      },
      volSetClose () {
        this.volSetVisible = false;
      },
      volSetHandleOk:function(){
        var ids = "";
        var that = this;
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          that.sliderstatus=true;
          for (var a = 0; a < this.selectedRowKeys.length; a++) {
            ids += this.selectedRowKeys[a] + ",";
          }
          if(!that.sliderstatus){
            return;
          }
          that.loading = true;
          httpAction(that.url.setRadioVol, {ids: ids,vol:that.volValue},"post").then((res) => {
            if (res.success) {
              that.loadData();
              that.onClearSelected();
              that.volSetClose();
              //that.$message.success(res.message);
              that.$message.success(that.$t('base.operationSuccessful'));

            } else {
              //that.$message.warning(res.message);
              that.$message.warning(that.$t('base.operationFailed'));
            }
          }).finally(() => {
            that.sliderstatus=false;
            that.loading = false;
          });
        }
      },

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>